<template>
    <div class="app">
        <h1>{{msg}}</h1>
        <!-- 通过父组件给子组件传递函数类型的props实现 ，子给父传递数据 -->
        <SchoolInfo/>
        <hr>
        <!-- 通过父组件给子组件绑定一个自定义事件实现 ，子给父传递数据 -->
        <!-- <StudentInfo v-on:atguigu="getStudentName"/> -->
        <!-- <StudentInfo @atguigu.once="getStudentName"/> -->
         <!-- <StudentInfo @atguigu="getStudentName" @demo="m1"/> -->
        <!-- 通过父组件给子组件绑定一个自定义事件实现 ，子给父传递数据(第二种写法，使用ref) -->
        <StudentInfo/>
    </div>
  
</template>

<script>
    //引入School组件
    import SchoolInfo from   './components/SchoolInfo'
    import StudentInfo from   './components/StudentInfo'
    export default {
        data() {
            return {
                msg: 'Welcome to Vue Test',
                studentName:''
            }
        },
        name: 'App',
        components: {
            StudentInfo,
            SchoolInfo
        }
    }
</script>

<style scoped>
.app{
    background-color: gray;
}

</style>